<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>人力资源登录系统</title>

		<link type="text/css" rel="stylesheet" href="css/style.css">

		<script src="js/jquery-easyui-1.4.3/jquery.min.js"></script>
		<script src="js/global.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/img_ver.js"></script>

		<style>
			.bxs-row {
				margin-bottom: 12px;
			}
			
			.logo-box {
				width: 404px;
				margin: 120px auto;
				border: 1px solid #e5e5e5;
				border-radius: 4px;
				box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
				position: relative;
				overflow: hidden;
				height: 360px;
			}
			
			.login {
				position: absolute;
				width: 320px;
				left: 0;
				top: 0;
				padding: 42px 42px 36px;
				transition: all 0.8s;
			}
			
			.username,
			.password,
			.btn {
				height: 44px;
				width: 100%;
				padding: 0 10px;
				border: 1px solid #9da3a6;
				background: #fff;
				text-overflow: ellipsis;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				-khtml-border-radius: 4px;
				border-radius: 4px;
				-webkit-box-shadow: none;
				-moz-box-shadow: none;
				box-shadow: none;
				color: #000;
				font-size: 1em;
				font-family: Helvetica, Arial, sans-serif;
				font-weight: 400;
				direction: ltr;
				font-size: 13px;
			}
			
			.submit {
				background-color: #0070ba;
				color: #fff;
				border: 1px solid #0070ba;
			}
			
			.submit:hover {
				background-color: #005ea6;
			}
			
			.verBox {
				position: absolute;
				width: 100%;
				text-align: center;
				left: 404px;
				top: 0;
				opacity: 0;
				transition: all 0.8s;
				padding-top: 55px;
			}
			
			.err {
				margin: 12px 0 0;
				line-height: 12px;
				height: 12px;
				font-size: 12px;
				color: red;
			}
		</style>
		
	</head>

	<body>

		<div class="logo-box">
			<div class="login" style="">
				<div class="bxs-row" style="text-align:center;">
					<h3 style="color:red;">登录人力资源系统</h3>
					<img id="logo"  style="width:72px;"><span class="tips" ></span>
				</div>
				<div class="bxs-row">
					<input type="text" id="username" class="username" placeholder="用户名" >
					<p class=" err err-username"></p>
				</div>
				<div class="bxs-row">
					<input type="password" id="password" class="password" placeholder="密码">
					<p class="err err-password"></p>
				</div>
				<div class="bxs-row">
					<input type="submit" class="submit btn"  value="登录">
				</div>
			</div>
			<div class="verBox">
				<div id="imgVer" style="display:inline-block;"></div>
			</div>
		</div>
		<script>
			imgVer({
				el: '$("#imgVer")',
				width: '260',
				height: '116',
				img: [
					'images/ver.png',
					'images/ver-1.png',
					'images/ver-2.png',
					'images/ver-3.png'
				],
				success: function() {
					//alert('执行登录函数');
					$(".login").css({
						"left": "0",
						"opacity": "1"
					});

					$(".verBox").css({
						"left": "404px",
						"opacity": "0"
					});
					var username=$("#username").val();
					var password=$("#password").val();
					$.post("http://127.0.0.1:8080/login",{
						eName:username,
						ePassword:password
					},function(res){
						if (res==1) {
							$.post("http://127.0.0.1:8080/findByeName",{
								eName:username
							},function(res){
								if (res) {
									var eId=res.eid;
									var eName=res.ename;
									alert("验证成功");
									globalData.setUserInfo(eId,eName);
									//window.location.href="index.html?uid="+uid+"&uname="+encodeURI(encodeURI(uname));
									window.location.href="index.html";
								}
							},"json")
						} else if(res==2) {
							$(".tips").html('用户被锁定，请联系管理员解锁');
						}else {
							$(".tips").html('账户或密码错误');
						}
						
					},"json")
				},
				error: function() {
					alert('验证错误，请重新验证')
				}
			});
			$(".submit").on('click', function() {
				if($(".username").val() == '') {

					$(".tips").html('请输入用户名');
					
				} else if($(".password").val() == '') {

					$(".tips").html('请输入密码');
					
				} else {
					$(".login").css({
						"left": "-404px",
						"opacity": "0"
					});
					$(".verBox").css({
						"left": "0",
						"opacity": "1"
					})
				}
			})
		</script>

	</body>

</html>